<template>
    <section class="content">
		<topHeader></topHeader>
         <!--<navbar :title="$t('gerenzhongxin.xiugaimima')" :right_show="false" :type="1" ref="navbar"></navbar>
        <section class="cont">
			<div class="shurukuangBox">
				<div class="item">
					<p>{{$t('bangding.jiumima')}}:</p> 
					<input type="password" v-model="form.old_password" :placeholder="$t('common.qingshuru') + $t('bangding.jiumima')">
				</div>
				<div class="item">
					<p>{{$t('bangding.xinmima')}}:</p>
					<input type="password" v-model="form.password" :placeholder="$t('common.qingshuru') + $t('bangding.xinmima')">
				</div>
				<div class="item">
					<p>{{$t('bangding.querenmima')}}:</p>
					<input type="password" v-model="form.password_confirmation" :placeholder="$t('common.qingshuru') + $t('bangding.querenmima')">
				</div>
				<div class="item" v-if="setting.sms_message">
					<p>{{$t('bangding.yanzhengma')}}: </p>
					<input type="number" v-model="form.code" :placeholder="$t('common.qingshuru') + $t('bangding.yanzhengma')">
					<i style="color: #fcc027;font-size: 12px;" v-if="!fasong" @click="fun_huoqu">{{$t('zhuce.huoqu_btn')}}</i>
					<article v-else>
					    <van-count-down ref="countDown" @finish="finish" :time="time" format="ss"/>s
					</article>
				</div>
			</div>
			<div class="buttBoxss" @click="fun_submit">
				{{$t('common.queren')}}
			</div>
        </section> -->
		<van-popup v-model="show" class="iframe_alert">
			<div class="baobiaoBox">
				<div class="baobiaoBoxTop">
					<p>{{$t('gerenzhongxin.xiugaimima')}}</p>
					<img src="../assets/img/guanbi.png" alt="" @click="guanbiBox">
				</div>
			</div>
			<section class="cont">
				<div class="shurukuangBox">
					<div class="item">
						<!-- <p>{{$t('bangding.jiumima')}}:</p> -->
						<img src="../assets/img/14.png" alt="" style="width: 35px;margin-right: 5px;">
						<input type="password" v-model="form.old_password" :placeholder="$t('common.qingshuru') + $t('bangding.jiumima')">
					</div>
					<div class="item">
						<!-- <p>{{$t('bangding.xinmima')}}:</p> -->
						<img src="../assets/img/15.png" alt="">
						<input type="password" v-model="form.password" :placeholder="$t('common.qingshuru') + $t('bangding.xinmima')">
					</div>
					<div class="item">
						<!-- <p>{{$t('bangding.querenmima')}}:</p> -->
						<img src="../assets/img/15.png" alt="">
						<input type="password" v-model="form.password_confirmation" :placeholder="$t('common.qingshuru') + $t('bangding.querenmima')">
					</div>
					<div class="item" v-if="setting.sms_message">
						<!-- <p>{{$t('bangding.yanzhengma')}}: </p> -->
						<img src="../assets/img/16.png" alt="">
						<input type="number" v-model="form.code" :placeholder="$t('common.qingshuru') + $t('bangding.yanzhengma')">
						<i style="color: #ffc806;font-size: 12px;" v-if="!fasong" @click="fun_huoqu">{{$t('zhuce.huoqu_btn')}}</i>
						<article v-else>
						    <van-count-down ref="countDown" @finish="finish" :time="time" format="ss"/>s
						</article>
					</div>
				</div>
				<div class="buttBoxss" @click="fun_submit">
					{{$t('common.queren')}}
				</div>
			</section>
		</van-popup>
    </section>
</template>

<script>
    import navbar from "@/components/navbar"
    import { CountDown } from 'vant'
	import topHeader from "@/components/topHeader"
    export default {
        name: "xiugaimima",
        components: {
            navbar,
            [CountDown.name]: CountDown,
			topHeader,
        },
        mounted() {

        },
        data() {
            return {
                time:  60 * 1000 * 2,
                fasong: false,
                form: {
                    old_password: '',
                    password: '',
                    password_confirmation: '',
                    code: ''
                },
                phone: this.$store.state.user.phone,
				setting: this.$store.state.config,
				show: true,
            }
        },
        methods: {
            fun_huoqu() { //获取短信验证码

                ///处理
                this.$https.fetchGet('/m/msgcode',{'phone' : this.phone}).then(res => {
                    this.$toast(res.status.msg)
                    this.fasong = true
                }).catch(err => {
                    this.$toast('网络异常');
                })
            },
            finish() { //倒计时结束
                this.fasong = false
            },
            fun_submit() {  ///确认
                if(this.form.old_password== ''){
                    this.$toast(this.$t('common.qingshuru') + this.$t('bangding.jiumima'))
                }
                else if(this.form.password== ''){
                    this.$toast(this.$t('common.qingshuru') + this.$t('bangding.yanzhengma'))
                }
                else if(this.form.password.length < 6){
                    this.$toast(this.$t('zhuce.password_alert_length') )
                }
                else if(this.form.password_confirmation== ''){
                    this.$toast(this.$t('common.qingshuru') + this.$t('bangding.querenmima'))
                }
                else if(this.form.password_confirmation != this.form.password){
                    this.$toast(this.$t('zhuce.password_alert_buyizhi'))
                }
                // else if(this.form.code == ''){
                //     this.$toast(this.$t('common.qingshuru') + this.$t('bangding.yanzhengma'))
                // }
                else{
                    this.$https.fetchPost('/m/reset_login_password',this.form).then(res => {
                        this.$toast(res.status.msg)
                        setTimeout( () => {
                            this.$router.push('gerenzhongxin')
                        },1000)
                    }).catch(err => {
                        this.$toast('网络异常');
                    })
                }
            },
			guanbiBox() {
				this.show = false
				this.$router.back()
			},
        }
    }
</script>

<style scoped lang="less">
	.buttBoxss {
		width: 95%;
		height: 40px;
		color: #fff;
		font-size: 15px;
		line-height: 40px;
		margin: 0px auto;
		background: #f49623;
		// background: linear-gradient(#ffd800, #ffc806);
		border-radius: 20px;
	}
	.shurukuangBox {
		width: 95%;
		margin: 30px auto 0;
	
		.item {
			display: flex;
			align-items: center;
			height: 40px;
			border: 1px solid #fff;
			border-radius: 20px;
			margin-bottom: 15px;
			padding-left: 20px;
			box-sizing: border-box;
			img {
				width: 40px;
				height: 33px;
			}
	
			p:nth-child(2) {
				padding-left: 10px;
				height: 33px;
				line-height: 33px;
				font-size: 14px;
				color: #fff;
			}
	
			input {
				width: 60%;
				color: #fff;
				padding-left: 10px;
				height: 33px;
				background: none;
				font-size: 14px;
				border: 0px;
			}
	
			article {
				color: #fcc027;
				width: 26%;
				display: flex;
				align-items: center;
	
				div {
					color: #fcc027;
					margin-right: .1rem;
				}
			}
		}
	}
	
	.content {
		height: 100vh;
		width: 100%;
		background-image: url('../assets/images/dsfgds.jpg');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	
		.cont {
			color: #fff;
	
			&>article {
				width: 98%;
				margin: 0 auto;
				display: flex;
				padding: 0 .4rem;
				border-bottom: 1px solid #292d30;
				font-size: .4rem;
				line-height: 1.6rem;
	
				span {
					display: block;
					width: 20%;
					text-align: left;
				}
	
				input {
					width: 55%;
					color: #fff;
					border: none;
					background: transparent;
				}
				input::placeholder{
					color: #fff;
				}
	
				article {
					color: #fff;
					width: 26%;
					display: flex;
					align-items: center;
	
					div {
						color: #fff;
						margin-right: .1rem;
					}
				}
			}
	
			&>button {
				background: linear-gradient(to bottom, #eb5d4d 0%, #fb2464 100%) !important;
				font-size: .46rem;
				border-radius: .2rem;
				width: 92%;
				margin: 1.5rem auto 0;
				border: none;
				line-height: 1.5rem;
			}
		}
	}
	
	.iframe_alert {
		width: 94%;
		background-color: #222222;
		margin: 20px auto 0;
		border-radius: 0.2rem;
		height: 90vh;
	
		.baobiaoBox {
			width: 100%;
	
			.baobiaoBoxTop {
				width: 100%;
				position: relative;
				text-align: center;
				font-size: 18px;
				background-color: #212429;
				font-weight: 600;
				padding: 10px 0px 25px;
				color: #fff;
	
				img {
					width: 25px;
					height: 25px;
					position: absolute;
					top: 10px;
					right: 10px;
				}
			}
		}
	}
</style>
